const form = layui.form
let id = location.search.split('?id=')[1]

// ==============下拉框数据获取============
axios.get('/my/article/cates').then(({ data: { data } }) => {
    const newStr = data.map(({ Id, name }) => {
        // 下拉框选择的结果是由option value决定
        // value设置成对应的Id值
        return `
        <option value="${Id}">${name}</option>
        `
    }).join('')
    $('[name="cate_id"]').append(newStr)
    // 调用layui中的render函数渲染
    form.render('select')

    // ==========编辑文章功能===========
    // console.log(id)
    axios.get(`/my/article/${id}`).then(({ data: { data } }) => {
        form.val('form', data)
        editor.txt.html(data.content)
        
        let imgSrc = `http://api-breakingnews-web.itheima.net` + data.cover_img
        $image.attr('src',imgSrc).cropper(options);
    })
    
})



//============== 初始化富文本编辑器=========
const E = window.wangEditor
const editor = new E("#div1")
// 层级改变，使下拉列表显示
editor.config.zIndex = 1
// 或者 const editor = new E(document.getElementById('div1'))
editor.create()



// =============图片裁切区域============
let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 400 / 280,
    preview: ".preview",
}


// 点击上传图片按钮，模拟点击file文件选择图片
$('#btnChooseCoverImage').on('click', function () {
    $('#fileCover').click()

})


//=============文件注册change事件=============

$('#fileCover').change(function () {
    const file = this.files[0]
    // 如果没有选择，后续代码不执行并且提示用户选择文件
    if (!file) {
        return layer.msg('请选择文件')
    }
    // 为文件创建一个url地址
    let newStr = URL.createObjectURL(file)
    // console.log(newStr)

    // 更换
    $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newStr)  // 重新设置图片路径
        .cropper(options)        // 重新初始化裁剪区域
})

// =============决定文章的状态是已发布还是草稿============
// 根据点击的是那个按钮来确定是什么状态
let state
$('#btnPublish').on('click', function () {
    state = '已发布'
})
$('#btnSave').on('click', function () {
    state = '草稿'
})


// ============发布文章===========
$('#form').on('submit', function (e) {
    e.preventDefault()

    const fd = new FormData(this)
    // 使用富文本编辑器中的editor.txt.html()获取富文本的内容
    fd.append('content', editor.txt.html())
    fd.append('state', state)
    fd.append('Id',id)
    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) {
            fd.append('cover_img', blob)
            // 使用forEach来查看FormData的表单数据  forEach是原型链上的方法，不是数组的方法
            // fd.forEach((value, name) => {
            //     console.log(value, name)
            // })
            axios.post('/my/article/edit', fd).then(({data:{status,message}}) => {
                
                if (status !== 0) {
                    return layer.msg(message)
                }
                layer.msg('更新文章成功', {
                    time: 1500 //（如果不配置，默认是3秒）
                }, function () {
                    location.href = './art_list.html'
                })
            })
        })
})